<template>
	<view>
		<view v-if="img" class="allwidth">
			<image class="imgsty" :src="img" alt="" mode="widthFix"></image>
			<view class="mask">
				<view class="coper" :style="{left:moveX +'px',top:moveY+'px',width:width+'px',height:width+'px'}"
					@touchmove="touchMove" @touchstart="touchStart" @touchend="touchEnd">
					<view class="midpre">
						<!-- <img class="preimg" :style="{left:-moveX +'px',top:-moveY+'px'}" :src="img" alt=""> -->
						<image class="preimg"
							:style="{left:-moveX +'px',top:-moveY+'px',width:pagewidth+'px',height:pageheight+'px'}"
							:src="img">
						</image>
					</view>
					<view class="dian" @touchmove.stop="resizeMove" @touchstart.stop="resizeStart"
						@touchend.stop="resizeEnd"></view>
				</view>
			</view>
		</view>
		<view class="flexbtnbox">
			<view class="btn1" @click="settoImg">选择图片</view>
			<view class="btn1" @click="getimgData">确认</view>
		</view>
		<image v-if="base64" style="width: 100%;" mode="widthFix" :src="base64"></image>
		<view style="width:0px;overflow: hidden;height: 0px;">
			<canvas v-if="img != ''" :style="{width:width*radio+'px',height:width*radio+'px'}" canvas-id="myCanvas"
				id="myCanvas"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		name: "copper",
		data() {
			return {
				resizestar: 0,
				img: '',
				pageX: 0,
				pageY: 0,
				moveX: 0,
				moveY: 0,
				width: 100,
				imgwidth: 0,
				imgheight: 0,
				pagewidth: 0,
				pageheight: 0,
				radio: 1,
				base64: '',
				canvas: '',
			};
		},
		methods: {
			getimgData() {
				let datas = {
					img: this.img,
					x: this.moveX * this.radio,
					y: this.moveY * this.radio,
					cx: (this.moveX + this.width / 2) * this.radio,
					cy: (this.moveY + this.width / 2) * this.radio,
					r: this.width * this.radio / 2,
					canvasWidth: this.width * this.radio,
					canvasHeight: this.width * this.radio,
					// radio: this.radio,
				}
				// console.log(datas)
				this.drawCanvas(datas)
			},
			// 微信小程序创建图片
			creatImg(canvas, src) {
				return new Promise((resolve, reject) => {
					let img = canvas.createImage() //canvas 2d 通过此函数创建一个图片对象
					img.src = src
					img.onload = () => {
						// console.log('--------', img.width)
						// console.log('--------', img.height)
						resolve(img)
					}
				})
			},
			// 微信小程序创建图片
			async drawCanvas(obj) {
				var context = uni.createCanvasContext('myCanvas', this)
				// console.log(context)
				context.width = obj.canvasWidth
				context.height = obj.canvasHeight
				context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight)
				// context.fillStyle = '#ffffff';
				// context.fillRect(0, 0, obj.canvasWidth, obj.canvasHeight);

				context.arc(obj.r, obj.r, obj.r - 5, 0, Math.PI * 2);
				context.clip()
				context.drawImage(obj.img, obj.x, obj.y, obj.r * 2, obj.r * 2, 0, 0, obj.r * 2,
					obj.r * 2);
				// console.log('draw')

				uni.showLoading({
					title: "加载中",
				})
				context.draw(true, (ret) => {
					// console.log(ret)
					uni.canvasToTempFilePath({ //写在 draw的回调里面才能生成图片
						x: 0,
						y: 0,
						width: this.imgwidth,
						height: this.imgwidth,
						destWidth: this.imgwidth, //生成图片的大小设置成canvas大小的二倍解决模糊
						destHeight: this.imgwidth,
						canvasId: 'myCanvas',
						quality: 1,
						complete: (res) => {
							// console.log(res, '--------------------');
							uni.hideLoading()
							this.base64 = res.tempFilePath
							let url = ''
							// #ifdef APP-PLUS
							var p = plus.io.convertLocalFileSystemURL(res.tempFilePath);
							url = 'file://' + p
							this.base64 = url
							// #endif
							this.$emit('confirm', this.base64)
						}
					}, this)
				})
			},
			resizeStart(e) {
				this.resizestar = e.changedTouches[0].pageX
			},
			resizeMove(e) {
				let addwidth = e.changedTouches[0].pageX - this.resizestar
				if (this.width <= 20 && addwidth < 0) return
				if (!this.checkResize() && addwidth > 0) {
					return
				}
				this.width += addwidth
				this.resizestar = e.changedTouches[0].pageX
			},
			resizeEnd() {
				this.resizestar = 0
			},
			touchStart(e) {
				this.pageX = e.changedTouches[0].pageX
				this.pageY = e.changedTouches[0].pageY
			},
			touchMove(e) {
				this.moveX += e.changedTouches[0].pageX - this.pageX
				this.moveY += e.changedTouches[0].pageY - this.pageY
				this.checkOut()
				this.pageX = e.changedTouches[0].pageX
				this.pageY = e.changedTouches[0].pageY
			},
			touchEnd(e) {
				this.pageX = 0
				this.pageY = 0
			},
			checkResize() {
				let endtype = true
				if (this.moveY >= this.pageheight - this.width) {
					this.moveY = this.pageheight - this.width
					endtype = false
				}
				if (this.moveX >= this.pagewidth - this.width) {
					this.moveX = this.pagewidth - this.width
					endtype = false
				}
				return endtype
			},
			checkOut() {
				let endtype = true
				if (this.moveX <= 0) {
					this.moveX = 0
					endtype = false
				}
				if (this.moveY <= 0) {
					this.moveY = 0
					endtype = false
				}
				if (this.moveY >= this.pageheight - this.width) {
					this.moveY = this.pageheight - this.width
					endtype = false
				}
				if (this.moveX >= this.pagewidth - this.width) {
					this.moveX = this.pagewidth - this.width
					endtype = false
				}
				return endtype
			},
			getImg() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					});
				})
			},
			getImgInfo(src) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src, //默认9
						success: function(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					});
				})
			},
			async settoImg() {
				this.img = ''
				this.base64 = ''
				let res = await this.getImg()
				if (!res.tempFilePaths) return
				// console.log(res.tempFilePaths)
				let res2 = await this.getImgInfo(res.tempFilePaths[0])
				this.img = res.tempFilePaths[0]
				let width = this.getSystem()
				this.pagewidth = width
				this.imgwidth = res2.width
				this.imgheight = res2.height
				this.radio = res2.width / width
				this.pageheight = res2.height / this.radio
				this.moveX = 0
				this.moveY = 0
				this.width = width / 2
				// console.log(res2)
				// // console.log(width)
				// // console.log(this._data)
			},
			getSystem() {
				let width = 375
				try {
					const res = uni.getSystemInfoSync();
					width = res.windowWidth
				} catch (e) {
					// error
				}
				return width
			}
		}
	}
</script>

<style>
	img,
	image {
		vertical-align: middle;
	}

	.allwidth {
		position: relative;
		width: 100%;
	}

	.imgsty {
		width: 100%;
	}

	.mask {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #000;
		opacity: .5;
		top: 0;
		left: 0;
	}

	.coper {
		position: absolute;
		border: 1px solid #fff;
		/* 		left: 20rpx;
		top: 30rpx; */
		/* 	width: 50%;
		height: 50%; */
		overflow: hidden;
	}

	.preimg {
		position: absolute;
		/* 		left: -20rpx;
		top: -30rpx; */
		/* 		width: 375px;
		height: 375px; */
	}

	.midpre {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
	}

	.flexbtnbox {
		display: flex;
	}

	.btn1 {
		flex: 1;
		text-align: center;
	}

	.dian {
		background-color: green;
		position: absolute;
		opacity: 1;
		width: 20px;
		height: 20px;
		bottom: 0;
		right: 0;
		z-index: 10;
	}
</style>
